import { Alert, Button, InputNumber, Space, Image, Badge, Form, Input, Table, App } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import './PerformanceRewards.less'
import { ProTable } from '@ant-design/pro-components'
import { useModel, history, useSearchParams } from '@umijs/max'
import { DownloadOutlined, MoneyCollectOutlined } from '@ant-design/icons'
import Upload from '@/components/Upload'
import PaymentDetails from '@/components/PaymentDetails/PaymentDetails'

const PerformanceRewards = () => {
  const { GetRewardList } = useModel('PerformanceRewards')

  const { message, modal } = App.useApp()

  const tableRef = useRef()

  const [currentPage, setCurrentPage] = useState(1) //  当前页码
  const [pageSize, setPageSize] = useState(10) //  每页数量

  // tab 选项卡
  const [searchParams] = useSearchParams()
  const [tabActiveKey, setTabActiveKey] = useState('total_count')
  const [tabActiveIndex, setTabActiveIndex] = useState(0)
  const [tabsList, setTabsList] = useState([])

  const [amountTotal, setAmountTotal] = useState({}) // 交易金额总计

  const [isModalOpen, setIsModalOpen] = useState(false) // 详情弹窗
  const [currentDetailsObj, setCurrentDetailsObj] = useState({}) // 当前详情

  const tabList = [
    {
      key: 'total_count',
      tab: '全部',
      num: 0,
      index: 0
    },
    {
      key: 'wait_payment',
      tab: '待打款',
      num: 0,
      index: 1
    },
    {
      key: 'already_payment',
      tab: '已打款',
      num: 0,
      index: 2
    }
  ]

  //  合并数量进tab徽标
  const formatTabs = tabsItem => {
    setTabsList(
      tabList.map(i => ({
        key: i.key,
        tab: (
          <Badge key={i.key} count={tabsItem[i.key]} overflowCount={99999}>
            <div>{i.tab}</div>
          </Badge>
        )
      }))
    )
  }

  // 处理 tab 切换
  const handleTabActive = key => {
    let index = tabList.findIndex(i => i.key === key)
    setTabActiveIndex(index)
    setTabActiveKey(key)
    setCurrentPage(1)
    tableRef.current.reload()
  }

  // 查看详情
  const handleCheckDetail = record => {
    setCurrentDetailsObj(record)
    setIsModalOpen(true)
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 80,
      hideInSearch: true
    },
    {
      title: '奖励金额',
      dataIndex: 'rewards_amount',
      hideInSearch: true
    },
    {
      title: '奖励类型',
      dataIndex: 'type',
      hideInSearch: true,
      valueEnum: {
        1: {
          text: '奖励达标奖励',
          status: 'Success'
        }
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      hideInSearch: true,
      render: (text, record) => {
        return (
          <div
            style={{
              display: 'flex',
              alignItems: 'start',
              flexDirection: 'column'
            }}
          >
            <Badge status={text === 0 ? 'processing' : 'success'} text={text === 0 ? '待打款' : '已打款'} />
            <Button type='primary' size='small' onClick={() => handleCheckDetail(record)}>
              查看详情
            </Button>
          </div>
        )
      }
    },
    {
      title: '操作人',
      dataIndex: 'op_name',
      hideInSearch: true
    },
    {
      title: '流水号',
      dataIndex: 'trade_no'
    },
    {
      title: '结算时间',
      hideInSearch: true,
      dataIndex: 'payment_date',
    },
    {
      title: '结算时间',
      dataIndex: 'payment_date',
      hideInTable: true,
      valueType: 'dateTimeRange',
      search: {
        transform: value => {
          return {
            payment_date_start: value[0],
            payment_date_end: value[1]
          }
        }
      }
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      hideInSearch: true
    }
  ]

  return (
    <>
      <PaymentDetails setIsModalOpen={setIsModalOpen} isModalOpen={isModalOpen} currentDetailsObj={currentDetailsObj} />

      <ProTable
        scroll={{ x: 'max-content' }}
        actionRef={tableRef}
        request={async params => {
          const param = {
            per_page: params.pageSize,
            page: params.current,
            trade_no: params.trade_no,
            payment_date_start: params.payment_date_start,
            payment_date_end: params.payment_date_end,
            type: tabActiveIndex
          }

          const res = await GetRewardList(param)

          setCurrentPage(params.current)
          setPageSize(params.pageSize)

          // 获取tab数量
          formatTabs(res.mark_stat)

          setAmountTotal({
            bottom_total_rewards_amount: res.list.bottom_total_rewards_amount
          })

          return {
            data: res.list.data,
            success: true,
            total: res.list.total
          }
        }}
        pagination={{
          pageSize: pageSize,
          current: currentPage
        }}
        rowKey='id'
        columns={columns}
        search={{
          defaultCollapsed: false,
          labelWidth: 80,
          span: 8
        }}
        toolbar={{
          multipleLine: true,
          tabs: {
            onChange: key => handleTabActive(key),
            activeKey: tabActiveKey,
            items: tabsList
          }
        }}
        summary={pageData => {
          return (
            <Table.Summary.Row>
              {columns.map((item, index) => {
                return (
                  <Table.Summary.Cell index={index} key={index}>
                    <div className='summary_cell'>
                      {index === 0 && <div className='summary_cell_item'>条件统计</div>}
                      {index === 1 && (
                        <div className='summary_cell_item'>{amountTotal.bottom_total_rewards_amount}</div>
                      )}
                    </div>
                  </Table.Summary.Cell>
                )
              })}
            </Table.Summary.Row>
          )
        }}
      />
    </>
  )
}
export default PerformanceRewards
